<template>
  <el-dialog
    :title="type == 'add' ? '添加' : '修改'"
    v-model="visible"
    width="400px"
    fullscreen
  >
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="formRef"
      label-width="100px"
      class="good-form"
    >
      <!-- 基本信息 -->
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>基本信息</span>
          </div>
        </template>
        <el-form-item label="报价名称" prop="name">
          <el-input type="text" v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="封面" prop="url">
          <el-upload
            class="avatar-uploader"
            action="https://www.watabe-wedding.com.cn/mini/api/upload/img"
            accept="jpg,jpeg,png"
            :show-file-list="false"
            :before-upload="handleBeforeUpload"
            :on-success="(val) => handleUrlSuccess(val, 'url')"
          >
            <img
              style="width: 100px; height: 100px; border: 1px solid #e9e9e9"
              v-if="ruleForm.url"
              :src="ruleForm.url"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="查看更多上面图" prop="moreHistoryTop">
          <el-upload
            action="https://www.watabe-wedding.com.cn/mini/api/upload/img"
            list-type="picture-card"
            :before-upload="handleBeforeUpload"
            :show-file-list="false"
            :on-success="(e) => handleUrlsSuccess(e, 'moreHistoryTop')"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <div
            v-if="ruleForm.moreHistoryTop.length"
            style="display: flex; flex-wrap: wrap"
          >
            <div
              v-for="(item, index) in ruleForm.moreHistoryTop"
              :key="item"
              style="display: flex; flex-direction: column; align-items: center"
            >
              <el-image
                style="
                  width: 120px;
                  height: 120px;
                  border: 1px solid #e9e9e9;
                  padding: 8px;
                "
                :src="item"
                class="avatar"
                :preview-src-list="ruleForm.moreHistoryTop"
              >
              </el-image>
              <el-button
                @click="handleRemove(index, 'moreHistoryTop')"
                style="margin: 8px"
                type="primary"
                icon="el-icon-delete"
              ></el-button>
            </div>
          </div>
        </el-form-item>
        <!-- <el-form-item label="查看更多历史" prop="moreHistory">
          <el-upload
            class="avatar-uploader"
            action="https://www.watabe-wedding.com.cn/mini/api/upload/img"
            accept="jpg,jpeg,png"
            :show-file-list="false"
            :before-upload="handleBeforeUpload"
            :on-success="(val) => handleUrlSuccess(val, 'moreHistory')"
          >
            <img
              style="width: 100px; height: 100px; border: 1px solid #e9e9e9"
              v-if="ruleForm.moreHistory"
              :src="ruleForm.moreHistory"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item> -->
        <el-form-item label="历史展开图" prop="unfoldHistory">
          <el-upload
            action="https://www.watabe-wedding.com.cn/mini/api/upload/img"
            list-type="picture-card"
            :before-upload="handleBeforeUpload"
            :show-file-list="false"
            :on-success="(e) => handleUrlsSuccess(e, 'unfoldHistory')"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <div
            v-if="ruleForm.unfoldHistory.length"
            style="display: flex; flex-wrap: wrap"
          >
            <div
              v-for="(item, index) in ruleForm.unfoldHistory"
              :key="item"
              style="display: flex; flex-direction: column; align-items: center"
            >
              <el-image
                style="
                  width: 120px;
                  height: 120px;
                  border: 1px solid #e9e9e9;
                  padding: 8px;
                "
                :src="item"
                class="avatar"
                :preview-src-list="ruleForm.unfoldHistory"
              >
              </el-image>
              <el-button
                @click="handleRemove(index, 'unfoldHistory')"
                style="margin: 8px"
                type="primary"
                icon="el-icon-delete"
              ></el-button>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="标题" prop="title">
          <el-input type="text" v-model="ruleForm.title"></el-input>
        </el-form-item>
        <el-form-item label="上级分类" prop="parentId">
          <el-select
            clearable
            placeholder="上级分类"
            v-model="ruleForm.parentId"
            size="small"
            style="width: 200px; margin-right: 10px"
          >
            <el-option
              v-for="item in options"
              :key="item._id"
              :label="item.name"
              :value="item._id"
            />
          </el-select>
          <!-- <el-cascader
            v-model="ruleForm.parentId"
            :options="options"
            placeholder="上级分类"
            clearable
            :props="cascaderProps"
            style="width: 200px; margin-right: 10px"
          ></el-cascader> -->
        </el-form-item>
        <el-form-item label="跳转地址">
          <el-input type="text" v-model="ruleForm.link"></el-input>
        </el-form-item>
        <el-form-item label="图片" prop="imgs">
          <el-upload
            action="https://www.watabe-wedding.com.cn/mini/api/upload/img"
            list-type="picture-card"
            :before-upload="handleBeforeUpload"
            :show-file-list="false"
            :on-success="(e) => handleUrlsSuccess(e, 'imgs')"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <div
            v-if="ruleForm.imgs.length"
            style="display: flex; flex-wrap: wrap"
          >
            <div
              v-for="(item, index) in ruleForm.imgs"
              :key="item"
              style="display: flex; flex-direction: column; align-items: center"
            >
              <el-image
                style="
                  width: 120px;
                  height: 120px;
                  border: 1px solid #e9e9e9;
                  padding: 8px;
                "
                :src="item"
                class="avatar"
                :preview-src-list="ruleForm.imgs"
              >
              </el-image>
              <el-button
                @click="handleRemove(index, 'imgs')"
                style="margin: 8px"
                type="primary"
                icon="el-icon-delete"
              ></el-button>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="图片轮播" prop="imgs_lunbo">
          <el-upload
            action="https://www.watabe-wedding.com.cn/mini/api/upload/img"
            list-type="picture-card"
            :before-upload="handleBeforeUpload"
            :show-file-list="false"
            :on-success="(e) => handleUrlsSuccess(e, 'imgs_lunbo')"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <div
            v-if="ruleForm.imgs_lunbo.length"
            style="display: flex; flex-wrap: wrap"
          >
            <div
              v-for="(item, index) in ruleForm.imgs_lunbo"
              :key="item"
              style="display: flex; flex-direction: column; align-items: center"
            >
              <el-image
                style="
                  width: 120px;
                  height: 120px;
                  border: 1px solid #e9e9e9;
                  padding: 8px;
                "
                :src="item"
                class="avatar"
                :preview-src-list="ruleForm.imgs_lunbo"
              >
              </el-image>
              <el-button
                @click="handleRemove(index, 'imgs_lunbo')"
                style="margin: 8px"
                type="primary"
                icon="el-icon-delete"
              ></el-button>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="排序值" prop="order">
          <el-input-number
            size="medium"
            v-model="ruleForm.order"
          ></el-input-number>
        </el-form-item>
      </el-card>
      <br />
      <!-- 分享信息 -->
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>分享信息</span>
          </div>
        </template>
        <el-form-item label="分享名称" prop="shareName">
          <el-input type="text" v-model="ruleForm.shareName"></el-input>
        </el-form-item>
        <el-form-item label="分享封面" prop="shareUrl">
          <el-upload
            class="avatar-uploader"
            action="https://www.watabe-wedding.com.cn/mini/api/upload/img"
            accept="jpg,jpeg,png"
            :show-file-list="false"
            :before-upload="handleBeforeUpload"
            :on-success="(val) => handleUrlSuccess(val, 'shareUrl')"
          >
            <img
              style="width: 100px; height: 100px; border: 1px solid #e9e9e9"
              v-if="ruleForm.shareUrl"
              :src="ruleForm.shareUrl"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-card>
      <br />
      <!-- 场地信息 -->
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>场地信息</span>
          </div>
        </template>
        <el-form-item label="分享名称">
          <el-input type="text" v-model="ruleForm.shareList[0].name"></el-input>
        </el-form-item>
        <el-form-item label="头部图片" prop="changdi_logo">
          <el-upload
            class="avatar-uploader"
            action="https://www.watabe-wedding.com.cn/mini/api/upload/img"
            accept="jpg,jpeg,png"
            :show-file-list="false"
            :before-upload="handleBeforeUpload"
            :on-success="(val) => handleUrlSuccess(val, 'changdi_logo')"
          >
            <img
              style="width: 100px; height: 100px; border: 1px solid #e9e9e9"
              v-if="ruleForm.changdi_logo"
              :src="ruleForm.changdi_logo"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <div v-for="(item, index) in ruleForm.changdiList" :key="item.key">
          <el-form-item label="图片">
            <el-upload
              action="https://www.watabe-wedding.com.cn/mini/api/upload/img"
              list-type="picture-card"
              :before-upload="handleBeforeUpload"
              :show-file-list="false"
              :on-success="
                (e) => handleUrlsSuccess(e, ['changdiList', index, 'imgs'])
              "
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <div
              v-if="ruleForm.changdiList[index].imgs.length"
              style="display: flex; flex-wrap: wrap"
            >
              <div
                v-for="(item, index2) in ruleForm.changdiList[index].imgs"
                :key="item"
                style="
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                "
              >
                <el-image
                  style="
                    width: 120px;
                    height: 120px;
                    border: 1px solid #e9e9e9;
                    padding: 8px;
                  "
                  :src="item"
                  class="avatar"
                  :preview-src-list="ruleForm.changdiList[index].imgs"
                >
                </el-image>
                <el-button
                  @click="handleRemove(index2, ['changdiList', index, 'imgs'])"
                  style="margin: 8px"
                  type="primary"
                  icon="el-icon-delete"
                ></el-button>
              </div>
            </div>
          </el-form-item>
          <el-form-item :label="'标题' + index">
            <el-input
              type="text"
              v-model="ruleForm.changdiList[index]['title']"
            ></el-input>
          </el-form-item>
          <el-form-item label="图片描述">
            <el-input
              type="text"
              v-model="ruleForm.changdiList[index]['description']"
            ></el-input>
          </el-form-item>
          <el-form-item label="详细描述">
            <el-input
              type="textarea"
              v-model="ruleForm.changdiList[index]['content']"
            ></el-input>
          </el-form-item>
        </div>
        <el-button
          @click="
            addMore('changdiList', {
              title: '',
              description: '',
              content: '',
              imgs: [],
            })
          "
          >新增</el-button
        >
        <el-button @click="delMore('changdiList')">删除</el-button>
      </el-card>
      <br />
      <!-- 位置信息 -->
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>位置信息</span>
          </div>
        </template>
        <el-form-item label="位置标题" prop="address_name">
          <el-input type="text" v-model="ruleForm.address_title"></el-input>
        </el-form-item>
        <el-form-item label="位置地址" prop="address_name">
          <el-input type="text" v-model="ruleForm.address_name"></el-input>
        </el-form-item>
        <el-form-item label="腾讯地图坐标" prop="location">
          <el-input type="text" v-model="ruleForm.location"></el-input>
        </el-form-item>
      </el-card>
      <br />
      <!-- 人气婚礼场地 -->
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>人气婚礼场地</span>
          </div>
        </template>
        <el-form-item label="分享名称">
          <el-input type="text" v-model="ruleForm.shareList[1].name"></el-input>
        </el-form-item>
        <el-form-item label="头部图片" prop="rqhlcd_logo">
          <el-upload
            class="avatar-uploader"
            action="https://www.watabe-wedding.com.cn/mini/api/upload/img"
            accept="jpg,jpeg,png"
            :show-file-list="false"
            :before-upload="handleBeforeUpload"
            :on-success="(val) => handleUrlSuccess(val, 'rqhlcd_logo')"
          >
            <img
              style="width: 100px; height: 100px; border: 1px solid #e9e9e9"
              v-if="ruleForm.rqhlcd_logo"
              :src="ruleForm.rqhlcd_logo"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <div v-for="(item, index) in ruleForm.rqhlcdList" :key="item.key">
          <el-form-item label="分享名称">
            <el-input
              type="text"
              v-model="ruleForm.shareRqhlcd[index]"
            ></el-input>
          </el-form-item>
          <el-form-item :label="'图片' + index">
            <el-upload
              action="https://www.watabe-wedding.com.cn/mini/api/upload/img"
              list-type="picture-card"
              :before-upload="handleBeforeUpload"
              :show-file-list="false"
              :on-success="
                (e) => handleUrlsSuccess(e, ['rqhlcdList', index, 'imgs'])
              "
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <div
              v-if="ruleForm.rqhlcdList[index].imgs.length"
              style="display: flex; flex-wrap: wrap"
            >
              <div
                v-for="(item, index2) in ruleForm.rqhlcdList[index].imgs"
                :key="item"
                style="
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                "
              >
                <el-image
                  style="
                    width: 120px;
                    height: 120px;
                    border: 1px solid #e9e9e9;
                    padding: 8px;
                  "
                  :src="item"
                  class="avatar"
                  :preview-src-list="ruleForm.rqhlcdList[index].imgs"
                >
                </el-image>
                <el-button
                  @click="handleRemove(index2, ['rqhlcdList', index, 'imgs'])"
                  style="margin: 8px"
                  type="primary"
                  icon="el-icon-delete"
                ></el-button>
              </div>
            </div>
          </el-form-item>
          <el-form-item :label="'标题' + index">
            <el-input
              type="text"
              v-model="ruleForm.rqhlcdList[index]['title']"
            ></el-input>
          </el-form-item>
          <el-form-item :label="'图片描述' + index">
            <el-input
              type="text"
              v-model="ruleForm.rqhlcdList[index]['description']"
            ></el-input>
          </el-form-item>
          <el-form-item :label="'详细描述' + index">
            <el-input
              type="textarea"
              v-model="ruleForm.rqhlcdList[index]['content']"
            ></el-input>
          </el-form-item>
        </div>
        <el-button
          @click="
            addMore('rqhlcdList', {
              title: '',
              description: '',
              content: '',
              imgs: [],
            })
          "
          >新增</el-button
        >
        <el-button @click="delMore('rqhlcdList')">删除</el-button>
      </el-card>
      <br />
      <!-- 套餐 -->
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>套餐</span>
          </div>
        </template>
        <el-form-item label="图片" prop="taocan_imgs">
          <el-upload
            action="https://www.watabe-wedding.com.cn/mini/api/upload/img"
            list-type="picture-card"
            :before-upload="handleBeforeUpload"
            :show-file-list="false"
            :on-success="(e) => handleUrlsSuccess(e, 'taocan_imgs')"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <div
            v-if="ruleForm.taocan_imgs.length"
            style="display: flex; flex-wrap: wrap"
          >
            <div
              v-for="(item, index) in ruleForm.taocan_imgs"
              :key="item"
              style="display: flex; flex-direction: column; align-items: center"
            >
              <el-image
                style="
                  width: 120px;
                  height: 120px;
                  border: 1px solid #e9e9e9;
                  padding: 8px;
                "
                :src="item"
                class="avatar"
                :preview-src-list="ruleForm.taocan_imgs"
              >
              </el-image>
              <el-button
                @click="handleRemove(index, 'taocan_imgs')"
                style="margin: 8px"
                type="primary"
                icon="el-icon-delete"
              ></el-button>
            </div>
          </div>
        </el-form-item>
        <!-- <el-form-item label="攻略图片" prop="taocan_tips_logo">
          <el-upload
            class="avatar-uploader"
            action="https://www.watabe-wedding.com.cn/mini/api/upload/img"
            accept="jpg,jpeg,png"
            :show-file-list="false"
            :before-upload="handleBeforeUpload"
            :on-success="(val) => handleUrlSuccess(val, 'taocan_tips_logo')"
          >
            <img
              style="width: 100px; height: 100px; border: 1px solid #e9e9e9"
              v-if="ruleForm.taocan_tips_logo"
              :src="ruleForm.taocan_tips_logo"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item> -->
        <div v-for="(taocan, i) in ruleForm.taocan_imgs" :key="taocan">
          <el-form-item label="分享名称">
            <el-input type="text" v-model="ruleForm.shareTaocan[i]"></el-input>
          </el-form-item>
          <el-form-item :label="`套餐${i + 1}标题图`">
            <el-upload
              class="avatar-uploader"
              action="https://www.watabe-wedding.com.cn/mini/api/upload/img"
              accept="jpg,jpeg,png"
              :show-file-list="false"
              :before-upload="handleBeforeUpload"
              :on-success="
                (val) => handleUrlSuccess(val, ['taocan_titleImg', i])
              "
            >
              <img
                style="width: 100px; height: 100px; border: 1px solid #e9e9e9"
                v-if="ruleForm.taocan_titleImg[i]"
                :src="ruleForm.taocan_titleImg[i]"
                class="avatar"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item
            v-for="(item, index) in ruleForm.tips[i]"
            :label="'攻略tips' + (index + 1)"
            :key="item.key"
          >
            <el-row>
              <el-col :span="22"
                ><el-input v-model="item.title" placeholder="内容"
              /></el-col>
              <el-col :span="2">
                <el-button @click.prevent="removeMore(`tips`, i, item)"
                  >删除</el-button
                ></el-col
              >
            </el-row>
          </el-form-item>
          <el-button
            style="margin-bottom: 20px"
            @click="
              addMore2(`tips`, i, {
                title: '',
              })
            "
            >套餐{{ i + 1 }}新增tip</el-button
          >
        </div>
      </el-card>
      <br />
      <!-- 热门婚宴臻选 -->
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>热门婚宴臻选</span>
          </div>
        </template>
        <el-form-item label="分享名称">
          <el-input type="text" v-model="ruleForm.shareList[2].name"></el-input>
        </el-form-item>
        <el-form-item label="头部图片" prop="rmhyzx_logo">
          <el-upload
            class="avatar-uploader"
            action="https://www.watabe-wedding.com.cn/mini/api/upload/img"
            accept="jpg,jpeg,png"
            :show-file-list="false"
            :before-upload="handleBeforeUpload"
            :on-success="(val) => handleUrlSuccess(val, 'rmhyzx_logo')"
          >
            <img
              style="width: 100px; height: 100px; border: 1px solid #e9e9e9"
              v-if="ruleForm.rmhyzx_logo"
              :src="ruleForm.rmhyzx_logo"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <div v-for="(item, index) in ruleForm.rmhyzxList" :key="item.key">
          <el-form-item label="分享名称">
            <el-input
              type="text"
              v-model="ruleForm.shareRmhyzx[index]"
            ></el-input>
          </el-form-item>
          <el-form-item :label="'图片' + index">
            <el-upload
              action="https://www.watabe-wedding.com.cn/mini/api/upload/img"
              list-type="picture-card"
              :before-upload="handleBeforeUpload"
              :show-file-list="false"
              :on-success="
                (e) => handleUrlsSuccess(e, ['rmhyzxList', index, 'imgs'])
              "
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <div
              v-if="ruleForm.rmhyzxList[index].imgs.length"
              style="display: flex; flex-wrap: wrap"
            >
              <div
                v-for="(item, index2) in ruleForm.rmhyzxList[index].imgs"
                :key="item"
                style="
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                "
              >
                <el-image
                  style="
                    width: 120px;
                    height: 120px;
                    border: 1px solid #e9e9e9;
                    padding: 8px;
                  "
                  :src="item"
                  class="avatar"
                  :preview-src-list="ruleForm.rmhyzxList[index].imgs"
                >
                </el-image>
                <el-button
                  @click="handleRemove(index2, ['rmhyzxList', index, 'imgs'])"
                  style="margin: 8px"
                  type="primary"
                  icon="el-icon-delete"
                ></el-button>
              </div>
            </div>
          </el-form-item>
          <el-form-item :label="'标题' + index">
            <el-input
              type="text"
              v-model="ruleForm.rmhyzxList[index]['title']"
            ></el-input>
          </el-form-item>
          <el-form-item :label="'图片描述' + index">
            <el-input
              type="textarea"
              v-model="ruleForm.rmhyzxList[index]['description']"
            ></el-input>
          </el-form-item>
        </div>
        <el-button
          @click="
            addMore('rmhyzxList', {
              title: '',
              description: '',
              imgs: [],
            })
          "
          >新增</el-button
        >
        <el-button @click="delMore('rmhyzxList')">删除</el-button>
      </el-card>
      <br />
      <!-- 必吃婚宴菜单推荐 -->
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>必吃婚宴菜单推荐</span>
          </div>
        </template>
        <el-form-item label="分享名称">
          <el-input type="text" v-model="ruleForm.shareList[3].name"></el-input>
        </el-form-item>
        <el-form-item label="必吃图片">
          <el-upload
            class="avatar-uploader"
            action="https://www.watabe-wedding.com.cn/mini/api/upload/img"
            accept="jpg,jpeg,png"
            :show-file-list="false"
            :before-upload="handleBeforeUpload"
            :on-success="(val) => handleUrlSuccess(val, 'bchycdtjImg')"
          >
            <img
              style="width: 100px; height: 100px; border: 1px solid #e9e9e9"
              v-if="ruleForm.bchycdtjImg"
              :src="ruleForm.bchycdtjImg"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <div v-for="(item, index) in ruleForm.bchycdtjList" :key="item.key">
          <el-form-item :label="'菜单' + (index + 1) + '分享名'">
            <el-input
              type="text"
              v-model="ruleForm.shareBchycdtj[index]"
            ></el-input>
          </el-form-item>
          <el-form-item label="头部图片">
            <el-upload
              class="avatar-uploader"
              action="https://www.watabe-wedding.com.cn/mini/api/upload/img"
              accept="jpg,jpeg,png"
              :show-file-list="false"
              :before-upload="handleBeforeUpload"
              :on-success="
                (val) => handleUrlSuccess(val, ['bchycdtjList', index, 'img'])
              "
            >
              <img
                style="width: 100px; height: 100px; border: 1px solid #e9e9e9"
                v-if="ruleForm.bchycdtjList[index]['img']"
                :src="ruleForm.bchycdtjList[index]['img']"
                class="avatar"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="菜品详情">
            <el-input
              type="text"
              v-model="ruleForm.bchycdtjList[index].title"
            ></el-input>
          </el-form-item>
          <div v-for="(item, i) in ruleForm.bchycdtjList[index].list" :key="i">
            <el-form-item :label="'菜品名称' + i">
              <el-input type="text" v-model="item.title"></el-input>
            </el-form-item>
            <el-form-item :label="菜品内容 + i">
              <el-input type="textarea" v-model="item.content"></el-input>
            </el-form-item>
            <el-button type="warning" @click="delMore(['bchycdtjList', index, 'list', i])"
              >删除菜品</el-button
            >
            {{index}}
          </div>
          <div style="margin: 20px 0">
            <el-button
              @click="
                addMore(['bchycdtjList', index, 'list'], {
                  title: '',
                  content: '',
                })
              "
              >新增菜品</el-button
            >
          </div>
          <el-button type="danger" @click="delMore('bchycdtjList', index)">删除{{'菜单' + (index + 1)}}</el-button>
          <hr />
        </div>
        <br />
        <el-button
          type="primary"
          @click="
            addMore('bchycdtjList', {
              title: '',
              description: '',
              list: [],
            })
          "
          >新增菜单</el-button
        >
        <!-- <el-button type="warning" @click="delMore('bchycdtjList')">删除</el-button> -->
      </el-card>
      <br />
      <!-- 婚礼入住房型先知 -->
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>婚礼入住房型先知</span>
          </div>
        </template>
        <el-form-item label="分享名称">
          <el-input type="text" v-model="ruleForm.shareList[4].name"></el-input>
        </el-form-item>
        <el-form-item label="头部图片" prop="hlrzfxxz_logo">
          <el-upload
            class="avatar-uploader"
            action="https://www.watabe-wedding.com.cn/mini/api/upload/img"
            accept="jpg,jpeg,png"
            :show-file-list="false"
            :before-upload="handleBeforeUpload"
            :on-success="(val) => handleUrlSuccess(val, 'hlrzfxxz_logo')"
          >
            <img
              style="width: 100px; height: 100px; border: 1px solid #e9e9e9"
              v-if="ruleForm.hlrzfxxz_logo"
              :src="ruleForm.hlrzfxxz_logo"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <div v-for="(item, index) in ruleForm.hlrzfxxzList" :key="item.key">
          <el-form-item label="分享名称">
            <el-input
              type="text"
              v-model="ruleForm.shareHlrzfxxz[index]"
            ></el-input>
          </el-form-item>
          <el-form-item :label="'图片' + index">
            <el-upload
              action="https://www.watabe-wedding.com.cn/mini/api/upload/img"
              list-type="picture-card"
              :before-upload="handleBeforeUpload"
              :show-file-list="false"
              :on-success="
                (e) => handleUrlsSuccess(e, ['hlrzfxxzList', index, 'imgs'])
              "
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <div
              v-if="ruleForm.hlrzfxxzList[index].imgs.length"
              style="display: flex; flex-wrap: wrap"
            >
              <div
                v-for="(item, index2) in ruleForm.hlrzfxxzList[index].imgs"
                :key="item"
                style="
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                "
              >
                <el-image
                  style="
                    width: 120px;
                    height: 120px;
                    border: 1px solid #e9e9e9;
                    padding: 8px;
                  "
                  :src="item"
                  class="avatar"
                  :preview-src-list="ruleForm.hlrzfxxzList[index].imgs"
                >
                </el-image>
                <el-button
                  @click="handleRemove(index2, ['hlrzfxxzList', index, 'imgs'])"
                  style="margin: 8px"
                  type="primary"
                  icon="el-icon-delete"
                ></el-button>
              </div>
            </div>
          </el-form-item>
          <el-form-item :label="'标题' + index">
            <el-input
              type="text"
              v-model="ruleForm.hlrzfxxzList[index]['title']"
            ></el-input>
          </el-form-item>
          <el-form-item :label="'图片描述' + index">
            <el-input
              type="text"
              v-model="ruleForm.hlrzfxxzList[index]['description']"
            ></el-input>
          </el-form-item>
        </div>
        <el-button
          @click="
            addMore('hlrzfxxzList', {
              title: '',
              description: '',
              imgs: [],
            })
          "
          >新增</el-button
        >
        <el-button @click="delMore('hlrzfxxzList')">删除</el-button>
      </el-card>
      <br />
      <!-- 额外惊喜派送 -->
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>额外惊喜派送</span>
          </div>
        </template>
        <el-form-item label="分享名称">
          <el-input type="text" v-model="ruleForm.shareList[5].name"></el-input>
        </el-form-item>
        <el-form-item label="头部图片" prop="ewjxps_logo">
          <el-upload
            class="avatar-uploader"
            action="https://www.watabe-wedding.com.cn/mini/api/upload/img"
            accept="jpg,jpeg,png"
            :show-file-list="false"
            :before-upload="handleBeforeUpload"
            :on-success="(val) => handleUrlSuccess(val, 'ewjxps_logo')"
          >
            <img
              style="width: 100px; height: 100px; border: 1px solid #e9e9e9"
              v-if="ruleForm.ewjxps_logo"
              :src="ruleForm.ewjxps_logo"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <div v-for="(item, index) in ruleForm.ewjxpsList" :key="item.key">
          <el-form-item :label="'图片' + index">
            <el-upload
              action="https://www.watabe-wedding.com.cn/mini/api/upload/img"
              list-type="picture-card"
              :before-upload="handleBeforeUpload"
              :show-file-list="false"
              :on-success="
                (e) => handleUrlsSuccess(e, ['ewjxpsList', index, 'imgs'])
              "
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <div
              v-if="ruleForm.ewjxpsList[index].imgs.length"
              style="display: flex; flex-wrap: wrap"
            >
              <div
                v-for="(item, index2) in ruleForm.ewjxpsList[index].imgs"
                :key="item"
                style="
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                "
              >
                <el-image
                  style="
                    width: 120px;
                    height: 120px;
                    border: 1px solid #e9e9e9;
                    padding: 8px;
                  "
                  :src="item"
                  class="avatar"
                  :preview-src-list="ruleForm.ewjxpsList[index].imgs"
                >
                </el-image>
                <el-button
                  @click="handleRemove(index2, ['ewjxpsList', index, 'imgs'])"
                  style="margin: 8px"
                  type="primary"
                  icon="el-icon-delete"
                ></el-button>
              </div>
            </div>
          </el-form-item>
          <el-form-item :label="'标题' + index">
            <el-input
              type="text"
              v-model="ruleForm.ewjxpsList[index]['title']"
            ></el-input>
          </el-form-item>
          <el-form-item :label="'图片描述' + index">
            <el-input
              type="text"
              v-model="ruleForm.ewjxpsList[index]['description']"
            ></el-input>
          </el-form-item>
        </div>
        <el-button
          @click="
            addMore('ewjxpsList', {
              title: '',
              description: '',
              imgs: [],
            })
          "
          >新增</el-button
        >
        <el-button @click="delMore('ewjxpsList')">删除</el-button>
      </el-card>
      <br />
      <!-- 爆款婚礼传送门 -->
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>爆款婚礼传送门</span>
          </div>
        </template>
        <el-form-item label="分享名称">
          <el-input type="text" v-model="ruleForm.shareList[6].name"></el-input>
        </el-form-item>
        <el-form-item label="头部图片" prop="bkhlcsm_logo">
          <el-upload
            class="avatar-uploader"
            action="https://www.watabe-wedding.com.cn/mini/api/upload/img"
            accept="jpg,jpeg,png"
            :show-file-list="false"
            :before-upload="handleBeforeUpload"
            :on-success="(val) => handleUrlSuccess(val, 'bkhlcsm_logo')"
          >
            <img
              style="width: 100px; height: 100px; border: 1px solid #e9e9e9"
              v-if="ruleForm.bkhlcsm_logo"
              :src="ruleForm.bkhlcsm_logo"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <div>
          <el-form-item :label="'图片'">
            <el-upload
              action="https://www.watabe-wedding.com.cn/mini/api/upload/img"
              list-type="picture-card"
              :before-upload="handleBeforeUpload"
              :show-file-list="false"
              :on-success="(e) => handleUrlsSuccess(e, ['bkhlcsm', 'imgs'])"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <div
              v-if="ruleForm.bkhlcsm.imgs.length"
              style="display: flex; flex-wrap: wrap"
            >
              <div
                v-for="(item, index2) in ruleForm.bkhlcsm.imgs"
                :key="item"
                style="
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                "
              >
                <el-image
                  style="
                    width: 120px;
                    height: 120px;
                    border: 1px solid #e9e9e9;
                    padding: 8px;
                  "
                  :src="item"
                  class="avatar"
                  :preview-src-list="ruleForm.bkhlcsm.imgs"
                >
                </el-image>
                <el-button
                  @click="handleRemove(index2, ['bkhlcsm', 'imgs'])"
                  style="margin: 8px"
                  type="primary"
                  icon="el-icon-delete"
                ></el-button>
              </div>
            </div>
          </el-form-item>
          <div v-for="(item, index) in ruleForm.bkhlcsm.imgs" :key="item">
            <el-form-item :label="'标题' + index">
              <el-input
                type="text"
                v-model="ruleForm.bkhlcsm['title'][index]"
              ></el-input>
            </el-form-item>
            <el-form-item :label="'图片描述' + index">
              <el-input
                type="text"
                v-model="ruleForm.bkhlcsm['description'][index]"
              ></el-input>
            </el-form-item>
            <el-form-item label="跳转地址">
              <el-input
                type="text"
                v-model="ruleForm.bkhlcsm['link'][index]"
              ></el-input>
            </el-form-item>
          </div>
        </div>
        <!-- <el-button
          @click="
            addMore('bkhlcsmList', {
              title: '',
              description: '',
              imgs: [],
            })
          "
          >新增</el-button
        >
        <el-button
          @click="
            delMore('bkhlcsmList', {
              title: '',
              description: '',
              imgs: [],
            })
          "
          >删除</el-button
        > -->
      </el-card>
      <br />
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { reactive, ref, toRefs, nextTick } from "vue";
import axios from "axios";
// import { localGet, uploadImgServer, hasEmoji } from '@/utils'
import { ElMessage } from "element-plus";
import { parseN, StrN } from "../utils";

const InitForm = {
  weddingName: "",
  url: "",
  parentId: "",
  name: "",
  description: "",
  link: "",
  order: 1,
  rqhlcdList: [
    {
      key: Date.now(),
      title: "",
      description: "",
      content: "",
      imgs: [],
    },
  ],
  rmhyzxList: [
    {
      key: Date.now(),
      title: "",
      description: "",
      imgs: [],
    },
  ],
  bchycdtjList: [
    {
      key: Date.now(),
      img: "",
      title: "",
      list: [],
    },
  ],
  bchycdtjImg: "",
  unfoldHistory: [],
  moreHistoryTop: [],
  imgs: [],
  imgs_lunbo: [],
  taocan_imgs: [],
  rmhyzx_imgs: [],
  bchycdtj_imgs: [],
  hlrzfxxz_imgs: [],
  ewjxps_imgs: [],
  // bkhlcsm_imgs: [],
  hlrzfxxzList: [],
  ewjxpsList: [],
  // bkhlcsmList: [],
  tips: [],
  taocan_titleImg: [],
  // bkhlcsm_link: [],
  changdiList: [
    {
      key: Date.now(),
      title: "",
      description: "",
      content: "",
      imgs: [],
    },
  ],
  bkhlcsm: {
    imgs: [],
    title: [],
    description: [],
    link: [],
  },
  shareList: [
    {
      value: "cdxx",
      name: "",
      checked: false,
    },
    {
      value: "rqhlcd",
      name: "",
      checked: false,
    },
    {
      value: "rmhyzx",
      name: "",
      checked: false,
    },
    {
      value: "bchycdtj",
      name: "必吃婚宴",
      checked: false,
    },
    {
      value: "hlrzfxxz",
      name: "婚礼入住",
      checked: false,
    },
    {
      value: "ewjxps",
      name: "额外惊喜",
      checked: false,
    },
    {
      value: "bkhlcsm",
      name: "爆款婚礼",
      checked: false,
    },
  ],
  shareTaocan: [],
  shareRqhlcd: [],
  shareHlrzfxxz: [],
  shareRmhyzx: [],
  shareBchycdtj: [],
};
export default {
  name: "DialogAddWork",
  props: {
    type: String,
    reload: Function,
    options: Object,
  },
  setup(props) {
    const formRef = ref();
    const state = reactive({
      cascaderProps: {
        value: "id",
        label: "name",
      }, // 树形props
      // uploadImgServer,
      token: localStorage.access_token,
      visible: false,
      ruleForm: InitForm,
      rules: {
        name: [{ required: "true", message: "不能为空", trigger: ["change"] }],
      },
      id: "",
    });
    // 获取详情
    const getDetail = (id) => {
      axios.get(`/api/quotation/${id}`).then((res) => {
        console.log("res", res);
        if (res.data.bchycdtjList) {
          res.data.bchycdtjList.forEach((item) => {
            item.list = item.list.map((item2) => {
              return StrN(item2);
            });
          });
        }
        if (res.data.rqhlcdList) {
          res.data.rqhlcdList = res.data.rqhlcdList.map((item) => {
            return StrN(item);
          });
        }
        if (res.data.rmhyzxList) {
          res.data.rmhyzxList = res.data.rmhyzxList.map((item) => {
            return StrN(item);
          });
        }
        if (res.data.changdiList) {
          res.data.changdiList = res.data.changdiList.map((item) => {
            return StrN(item);
          });
        }
        if (res.data.ewjxpsList) {
          res.data.ewjxpsList = res.data.ewjxpsList.map((item) => {
            return StrN(item);
          });
        }
        state.ruleForm = {
          ...state.ruleForm,
          ...res.data,
        };
      });
    };
    const addMore = (key, rowKey) => {
      if (Array.isArray(key)) {
        state.ruleForm[key[0]][key[1]][key[2]] = [
          ...state.ruleForm[key[0]][key[1]][key[2]],
          {
            ...rowKey,
            key: Date.now(),
          },
        ];
        return;
      }
      state.ruleForm[key] = [
        ...state.ruleForm[key],
        {
          ...rowKey,
          key: Date.now(),
        },
      ];
    };
    const delMore = (key, index) => {
      if (Array.isArray(key)) {
        switch (key[0]) {
          case "bchycdtjList":
            state.ruleForm[key[0]][key[1]][key[2]].splice(key[3], 1)
            break;
          default:
            state.ruleForm[key[0]][key[1]][key[2]].pop();
            break;
        }

        return;
      }
      if (typeof index == 'number') {
        console.log(state.ruleForm[key])
        console.log(index)
        state.ruleForm[key].splice(index, 1)
      } else {
        state.ruleForm[key].pop();
      }
      
    };
    const addMore2 = (key, i, rowKey) => {
      if (!state.ruleForm[key][i]) {
        state.ruleForm[key][i] = [
          {
            ...rowKey,
            key: Date.now(),
          },
        ];
      } else {
        state.ruleForm[key][i] = [
          ...state.ruleForm[key][i],
          {
            ...rowKey,
            key: Date.now(),
          },
        ];
      }
    };
    function removeMore(key, i, row) {
      // debugger
      state.ruleForm[key][i] = state.ruleForm[key][i].filter(
        (item) => item.key !== row.key
      );
    }
    const handleBeforeUpload = (file) => {
      const sufix = file.name.split(".")[1] || "";
      if (!["jpg", "jpeg", "png"].includes(sufix)) {
        ElMessage.error("请上传 jpg、jpeg、png 格式的图片");
        return false;
      }
    };
    const handleVideoBeforeUpload = (file) => {};
    // 上传图片
    const handleUrlSuccess = (val, key) => {
      console.log("handleUrlSuccess", val);
      if (typeof key === "string") {
        state.ruleForm[key] = val || "";
      } else {
        if (key[0] === "bchycdtjList") {
          state.ruleForm[key[0]][key[1]][key[2]] = val;
          return;
        }
        state.ruleForm[key[0]][key[1]] = val;
        // 上传
      }
    };
    // 上传图片列表
    const handleUrlsSuccess = (val, key) => {
      if (typeof key === "string") {
        state.ruleForm[key] = [...state.ruleForm[key], val];
      } else {
        if (key[2]) {
          state.ruleForm[key[0]][key[1]][key[2]] = [
            ...state.ruleForm[key[0]][key[1]][key[2]],
            val,
          ];
        }
        if (!key[2]) {
          state.ruleForm[key[0]][key[1]] = [
            ...state.ruleForm[key[0]][key[1]],
            val,
          ];
        }
      }
    };
    // 上传视频
    const handleVideoSuccess = (val) => {
      console.log(val);
      state.ruleForm.video = val || "";
    };
    // 图片列表删除
    const handleRemove = (index, key) => {
      if (typeof key === "string") {
        state.ruleForm[key].splice(index, 1);
      } else {
        if (key[2]) {
          state.ruleForm[key[0]][key[1]][key[2]].splice(index, 1);
        }
        if (!key[2]) {
          state.ruleForm[key[0]][key[1]].splice(index, 1);
        }
      }
    };
    // 视频删除
    const handleVideoRemove = () => {
      state.ruleForm.video = "";
    };

    // 开启弹窗
    const open = (id) => {
      state.visible = true;
      if (id) {
        state.id = id;
        getDetail(id);
      } else {
        state.ruleForm = {
          ...InitForm,
        };
      }
    };
    // 关闭弹窗
    const close = () => {
      state.visible = false;
    };
    const submitForm = () => {
      formRef.value.validate((valid) => {
        if (valid) {
          if (state.ruleForm.bchycdtjList) {
            state.ruleForm.bchycdtjList.forEach((item) => {
              item.list = item.list.map((item2) => {
                return parseN(item2);
              });
            });
          }
          if (state.ruleForm.rqhlcdList) {
            state.ruleForm.rqhlcdList = state.ruleForm.rqhlcdList.map(
              (item) => {
                return parseN(item);
              }
            );
          }
          if (state.ruleForm.rmhyzxList) {
            state.ruleForm.rmhyzxList = state.ruleForm.rmhyzxList.map(
              (item) => {
                return parseN(item);
              }
            );
          }
          if (state.ruleForm.changdiList) {
            state.ruleForm.changdiList = state.ruleForm.changdiList.map(
              (item) => {
                return parseN(item);
              }
            );
          }
          if (state.ruleForm.ewjxpsList) {
            state.ruleForm.ewjxpsList = state.ruleForm.ewjxpsList.map(
              (item) => {
                return parseN(item);
              }
            );
          }
          if (props.type == "add") {
            axios({
              method: "post",
              url: "/api/quotation",
              data: {
                ...state.ruleForm,
              },
            }).then((res) => {
              console.log(res);
              ElMessage.success("添加成功");
              state.visible = false;
              if (props.reload) props.reload();
            });
          } else {
            axios
              .put("/api/quotation", {
                ...state.ruleForm,
              })
              .then(() => {
                ElMessage.success("修改成功");
                state.visible = false;
                if (props.reload) props.reload();
              });
          }
        }
      });
    };
    return {
      ...toRefs(state),
      open,
      close,
      formRef,
      handleBeforeUpload,
      handleVideoBeforeUpload,
      handleUrlSuccess,
      handleUrlsSuccess,
      handleVideoSuccess,
      handleRemove,
      handleVideoRemove,
      submitForm,
      addMore,
      delMore,
      addMore2,
      removeMore,
    };
  },
};
</script>

<style lang="scss" scoped>
.avatar-uploader {
  width: 100px;
  height: 100px;
  color: #ddd;
  font-size: 30px;
}
.avatar-uploader-icon {
  display: block;
  width: 100%;
  height: 100%;
  border: 1px solid #e9e9e9;
  padding: 32px 17px;
}
</style>
